<template>
    <!-- 选择空闲桌台弹窗 -->
    <el-dialog v-model="visible" top="80px" draggable overflow :close-on-click-modal="false" :close-on-press-escape="false"
        :show-close="false">
        <div class="tableSelect">
            <div class="tableSelect-title">选择桌台</div>
            <div style="padding: 0 4px;">
                <div class="tableSelect-tab">
                    <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList" :key="k"
                        @click="onChangeTab('tableSelect', k)">
                        <div>{{ v.name }}</div>
                        <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
                    </div>
                </div>
            </div>

            <div class="tableSelect-main" @click="onSelectTable">
                <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode"
                    :class="{ active: tabSelActive == k }" v-for="(v, k) in freeTableList" :key="k">{{ v.roomName }}</div>
                <div class="tableSelect-main-item spe" data-type="up" :class="{ canNotUse: usePostForm.pageIndex == 1 }"
                    @click="onChangePage">上页</div>
                <div class="tableSelect-main-item spe" data-type="down"
                    :class="{ canNotUse: freeTableList.length < usePostForm.pageSize }" @click="onChangePage">下页</div>
            </div>
            <div class="popup-btn" style="padding: 0 4px;">
                <div class="btn-cancle" @click="handleCancel">取消</div>
                <div class="btn-submit" @click="handleSubmit">确认</div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>

import dayjs from "dayjs"
import Api from '@/api'

const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})
const visible = toRef(props, 'visible')

const zoneList = ref([]) // 桌台类型
// 获取空闲房台
const usePostForm = ref({
    reserveTime: '',
    roomState: '0',
    typeCode: '',
    pageSize: 38,
    pageIndex: 1
})
const freeTableList = ref([])
const getCanUseTables = (flag) => {
    if (flag) {
        usePostForm.value.pageIndex = 1
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": usePostForm.value })
        .then(res => {
            freeTableList.value = res.result[0].areaRooms // 选择桌台弹窗显示的桌台
            console.log(freeTableList.value);
        })
}
usePostForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
getCanUseTables(true)

const tabSelActive = ref(0) // 选中桌台的下标
const tableSelectActive = ref(0) // 选中桌台类型的下标
const onChangeTab = (type, k, v) => {
    tableSelectActive.value = k
    usePostForm.value.typeCode = zoneList.value[k].code
    getCanUseTables()

}

// 桌台选中切换
const onSelectTable = (e) => {
    console.log(e.target.dataset);
    if (e.target.dataset.id) {
        tabSelActive.value = e.target.dataset.id
    }
}
// 空闲桌台弹窗上下页切换
const onChangePage = (e) => {
    console.log(e.target.dataset.type);
    if (e.target.dataset.type == 'down') {
        if (freeTableList.value.length < usePostForm.value.pageSize) {
            return
        } else {
            usePostForm.value.pageIndex++
        }

    } else {
        if (usePostForm.value.pageIndex <= 1) {
            return
        } else {
            usePostForm.value.pageIndex--
        }
    }
    getCanUseTables()
}

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit',])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const handleSubmit = (params) => {
    // turnTableForm.value.newRoomCode
    let data = {
        newRoomCode: freeTableList.value[tabSelActive.value].roomCode,
        selectedTabName: freeTableList.value[tabSelActive.value].roomName
    }
    emit('emitSubmit', data,)
}

</script>

<style scoped lang="scss">
.tableSelect {
    white-space: nowrap;
    padding: 36px 52px 20px;

    .tableSelect-title {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        padding: 0 0 32px 8px;
    }

    .tableSelect-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 42px;
        background: #F2F2F2;
        border-radius: 8px;

        // padding-left: 8px;
        .tab-item {
            padding: 15px 0px;
            width: 16%;
            text-align: center;
            cursor: pointer;
            position: relative;

            &.active {
                color: #FF6A00;
            }

            .tab-item-bottom {
                position: absolute;
                bottom: 4px;
                left: 50%;
                transform: translateX(-50%);
                width: 24px;
                height: 2px;
                background-color: #FF6A00;
                border-radius: 1px;
                display: none;

                &.active {
                    display: block;
                }
            }
        }
    }

    .tableSelect-main {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
        padding-top: 20px;

        .tableSelect-main-item {
            // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
            width: calc(12.5% - 16px);
            height: 96px;
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
            line-height: 96px;
            margin: 0 8px 16px 8px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
            cursor: pointer;

            &.spe {
                background: #E6E6E6;
            }

            &.active {
                background: #FFE566;
            }

            &.canNotUse {
                background: #F2F2F2;
                color: #CCCCCC;
            }
        }
    }

    .popup-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn-cancle {
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 60px;
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            margin-right: 36px;
            cursor: pointer;
        }

        .btn-submit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            cursor: pointer;
        }
    }
}
</style>
